<template>
  <div class="list">
    <div class="album-black">
      <p>唱片管理</p>
    </div>
    <div class="album-white">
      <el-button type="primary" class="add" @click="dialogFormVisible = true">
        添加唱片
      </el-button>
      <!-- 弹框部分 -->
        <el-dialog title="添加唱片" :visible.sync="dialogFormVisible" style="text-align:left;">
          <el-form :model="form">
            <el-form-item label="唱片" :label-width="formLabelWidth">
              <el-input v-model="form.album" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="歌手" :label-width="formLabelWidth">
              <el-input v-model="form.singer" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="价格" :label-width="formLabelWidth">
              <el-input v-model="form.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="库存" :label-width="formLabelWidth">
              <el-input v-model="form.stock" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="submit" >确 定</el-button>
          </div>
        </el-dialog>
      <!-- 表格部分 -->
      <el-table
        :data="list"
        border
        style="width:100%"
        >
        <el-table-column
          prop="id"
          label="序号"
          width="130">
        </el-table-column>
        <el-table-column
          prop="album"
          label="唱片"
          width="150">
        </el-table-column>
        <el-table-column
          prop="singer"
          label="歌手"
          width="130">
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="130">
        </el-table-column>
        <el-table-column
          prop="stock"
          label="库存"
          width="130">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary"
             @click="handleClick(scope.row)"   >
              查看详情
            </el-button>
            <el-button type="danger"
             @click="delClick(scope.id)"  >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 结算部分 -->
    <div class="album-num">
      <h3>唱片统计: </h3>  
      <p>共{{ total.number }}张库存,总计￥{{ total.price }}元</p>
    </div>
  </div>
</template>

<script>
import list from './album-list.js'
export default {
  data(){
      return {
          list,
          dialogFormVisible: false,
          form: {
            album: '',
            singer:'',
            price:'',
            stock:''
          },
          formLabelWidth: '150px', 
      }
  },
  methods:{
      submit(){
        const length = this.list.length+1
        this.list.push({
          id:'album00'+length,
          ...this.form
        })
        this.form={}
        this.dialogFormVisible = false
        console.log(this.list);
        localStorage.setItem('form',this.list)
      },
       handleClick(id) {
         console.log(id);
        location.href="./#/detail?id="+ id.id
      },
      delClick(id){
        this.list.splice(id,1)
      }
  },
  computed:{
      total(){
        let number = 0;
        let price = 0;
        this.list.forEach(item=>{
        
          number+=item.stock
          price+=item.stock * item.price
        });
        return {
          number,
          price
        }
      }
    }
}
</script>
<style lang="sass" scoped>
.list 
  margin: 0 auto
  width: 1000px
  height: 500px
  .album-black 
    background: #333
    width: 100%
    color: #fff
    text-align-last: left
    padding-left: 44px
    line-height: 120px
    font-size: 36px
  .album-white
    padding: 42px
    margin-top: 80px
    width: 100%
    position: relative
    & .add 
      position: absolute
      top: -10px
      left: 40px
  .album-num
    margin-left: 200px
    width: 300px
    line-height: 50px
    text-align: left
  .el-form-item
    margin-left: 50px
    width: 380px
  .detail
    margin-top: 10px
    margin-left: 100px
  .del 
    margin-top: 10px
    margin-left: -40px
  .dialog-footer 
    position: absolute
    bottom: 10px
    right: 240px
    & .el-button:last-child
      margin-left: 90px
</style>